import React, { Component } from 'react';
import { Card } from 'material-ui/Card';
import Avatar from 'material-ui/Avatar';
import Divider from 'material-ui/Divider';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import { ListItem } from 'material-ui/List';
import IconButton from 'material-ui/IconButton';
import { grey400 } from 'material-ui/styles/colors';
import ContentAdd from 'material-ui/svg-icons/content/add';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bubble';

import CONFIG from '../../config';
import { parseJSON, getMethod, postJsonMethod } from '../../redux/Helper';

export default class ShowPeoplePanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      joinUsers: [],
      applyUsers: []
    }
  }

  componentWillMount() {
    this.initFetch();
  }

  /**
   * 获取初始数据
   */
  initFetch = () => {
    let url = `${CONFIG.apiHost}/api/activity/show/${this.props.data.id}`;
    let request = `?token=${this.props.token}`;
    let joinUsersUrl = `${url}/join${request}`;
    let applyUsersUrl = `${url}/apply${request}`;

    fetch(joinUsersUrl, getMethod)
      .then(parseJSON)
      .then(res => {
        this.setState({joinUsers: res.msg})
      });
    fetch(applyUsersUrl, getMethod)
      .then(parseJSON)
      .then(res => {
        this.setState({applyUsers: res.msg})
      });
  };

  /**
   * 允许用户加入活动,之后重新获取数据
   */
  join = (companionId) => {
    let request = `?token=${this.props.token}`;
    let url = `${CONFIG.apiHost}/api/activity/join/${this.props.data.id}${request}`;
    let postData = {
      user_id: this.props.userId,
      companion_id: companionId
    };

    fetch(url, postJsonMethod(postData))
    .then(parseJSON)
    .then(res => {
      this.initFetch();
    })
  };

  render() {
    const iconButtonElement = (
      <IconButton
        tooltip='更多'
        tooltipPosition='bottom-left'
      >
        <MoreVertIcon color={grey400} />
      </IconButton>
    );

    let joinUsersArr = this.state.joinUsers.map((item, index) => {
      return (
        <ListItem
          key={index}
          primaryText={item.user_name}
          leftAvatar={<Avatar src={item.user_img} />}
          onClick={this.props.pushTo.bind(this, `/user/${item.user_id}`)}
        />
      );
    });

    let applyUsersArr = this.state.applyUsers.map((item, index) => {
      return (
        <ListItem
          key={index}
          disabled={true}
          primaryText={item.user_name}
          leftAvatar={<Avatar src={item.user_img} />}
          rightIconButton={
            <IconMenu 
              iconButtonElement={iconButtonElement}
              anchorOrigin={{horizontal: 'right', vertical: 'top'}}
              targetOrigin={{horizontal: 'right', vertical: 'top'}}
            >
              <MenuItem onTouchTap={this.props.pushTo.bind(this, `/user/${item.user_id}`)}>查看</MenuItem>
              {this.props.isPublisher ?  
                <MenuItem onTouchTap={this.join.bind(this, item.user_id)}>允许</MenuItem> : ''
              }
            </IconMenu>
          }
        />
      );
    });

  	return (
  	  <Card className="card-line">
        <div style={{padding: 16, fontSize: 20}}>人员</div>
        <Divider />
        <ListItem 
          primaryText={'已经参与 ' + this.state.joinUsers.length}
          primaryTogglesNestedList={true}
          initiallyOpen={false}
          nestedItems={joinUsersArr}
        />
        <ListItem 
          primaryText={'申请加入 ' + this.state.applyUsers.length}
          primaryTogglesNestedList={true}
          initiallyOpen={false}
          nestedItems={applyUsersArr}
        />
      </Card>
  	);
  }
};
